<template>
    <el-table :data="tableData" border @selection-change="selectionChangeHandle">
        <el-table-column
            v-for="(item, index) in tableColumn"
            :key="index"
            :type="item.type"
            :prop="item.value"
            :width="getWidthHandle(item)"
            :min-width="getMinWidthHandle(item)"
            :label="item.label"
            :show-overflow-tooltip="true"
            :fixed="getFixHandle(item)"
        >
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup name="SGTable">
import type { ITableColumn } from '@/types/table';

const { tableData, tableColumn } = defineProps({
    tableData: {
        required: true,
        type: Array,
        default: () => []
    },
    tableColumn: {
        required: true,
        type: Array<ITableColumn>,
        default: () => []
    },
    selectList: {
        type: Array
    }
});

const emit = defineEmits(['update:selectList', 'select-change']);

// 获取宽度
const getWidthHandle = (item: ITableColumn) => {
    if (item.width) return item.width;
    if (item.type === 'selection') return 60;
    else if (item.type === 'index') return 80;
    return undefined;
};
// 获取固定位置
const getFixHandle = (item: ITableColumn) => {
    if (item.fixed) return item.fixed;
    return false;
};
// 获取最小宽度
const getMinWidthHandle = (item: ITableColumn) => {
    if (item.minWidth) return item.minWidth;
    return 160;
};

// 选择事件
const selectionChangeHandle = (val: any) => {
    emit('update:selectList', val);
    emit('select-change', val);
};
</script>
